<template>
	<view style="background-image: url('/static/background/back4.jpg')" class="container">
		<!-- 轮播图区域 -->
		<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<view class="swiper-item">
					<image :src="item.p" class="swiper-inner" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		</view>
		<!-- 朝代导航区域 -->
		<view class="nav">
			<view class="navitem" v-for="item in navList" :key="item.id">
				<navigator :url="'/subpkg/chaodaiDetail/chaodaiDetail?id=' + item.id">
					<image :src="item.p" mode=""></image>
					<view style="text-align: center;">{{item.chaodai}}</view>
				</navigator>
				
			</view>
		</view>
		<!-- 汉服小故事 -->
		<h1 class="hanfu-title">汉服两三事</h1>
		<navigator v-for="item in storyList" :url="'/subpkg/story/story?id=' + item.id" :key="item.id">
			<StoryBox 
				:Image="item.p"
				:Title="item.title"
				:Content="item.detail"
				:Time="item.time"
			></StoryBox>
		</navigator>
		
	</view>
	
</template>

<script>
	import StoryBox from '../../components/StoryBox.vue';
	export default {
		components:{
			StoryBox
		},
		data() {
			return {
				 swiperList: [],
				 navList:[
					 {p:'../../static/shouye/nav/han.png',id:1,chaodai:'汉朝'},
					 {p:'../../static/shouye/nav/weijin.png',id:2,chaodai:'魏晋'},
					 {p:'../../static/shouye/nav/tang.png',id:3,chaodai:'唐朝'},
					 {p:'../../static/shouye/nav/song.png',id:4,chaodai:'宋朝'},
					 {p:'../../static/shouye/nav/ming.png',id:5,chaodai:'明朝'}
				 ],
				 storyList:[]
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getStoryList();
		  },
		methods: {
			async getSwiperList() {
			  try {
			    // 发起请求
			    const res = await uni.$http.get("/home/swiper");
			    console.log('完整响应数据:', res); 
				
				// 先检查HTTP状态码
				if (res.statusCode !== 200) {
				    throw new Error(`HTTP错误，状态码：${res.statusCode}`);//会交给catch处理
				}
			    // 检查业务状态码
			    if (res.statusCode === 200 && res.data.code === 1) {
			      // 数据路径：res.data.data
			      this.swiperList = res.data.data;
			      console.log('获取到的轮播图数据:', this.swiperList);
			    } else {
			      // 业务逻辑错误处理
			      uni.showToast({
			        title: res.data.msg || '数据获取失败',
			        icon: 'none',
			        duration: 1500
			      });
			    }
			  } catch (err) {
			    // 网络错误处理
			    console.error('请求发生错误:', err);
			    uni.showToast({
			      title: '网络连接失败，请稍后重试',
			      icon: 'none',
			      duration: 1500
			    });
			  }
			},
			async getStoryList(){
				try {
					const res = await uni.$http.get("/home/storyBox");
					console.log('完整响应数据:', res);
					if(res.statusCode !== 200){
						throw new Error(`HTTP错误，状态码：${res.statusCode}`);//会交给catch处理
					}
					if(res.statusCode === 200 && res.data.code === 1){
						this.storyList = res.data.data;
						console.log('获取到的故事框数据:', this.storyList);
					}
					else {
					    // 业务逻辑错误处理
					    uni.showToast({
					      title: res.data.msg || '数据获取失败',
					      icon: 'none',
					      duration: 1500
					    });
					  }
				} catch (error) {
					// 网络错误处理
					console.error('请求发生错误:', error);
					uni.showToast({
					  title: '网络连接失败，请稍后重试',
					  icon: 'none',
					  duration: 1500
					});
				}
			}
		}
	}
</script>

<style scoped>
	swiper{
		height: 450rpx;
	}
	.swiper-item{
		height: 450rpx;
	}
	.swiper-inner{
		width: 100%;
		height: 100%;
	}
	.nav{
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.navitem{
		height: 150rpx;
	}
	.navitem image{
		height: 100rpx;
		width: 100rpx;
		margin: 0 auto;
	}
	.hanfu-title {
		font-family: "STKaiti","SimSun","KaiTi" ;
	    font-size: 24px;
	    font-weight: bold;
	    margin-top: 10px;
	    margin-bottom: 10px;
		border-bottom: 2rpx solid #eee;
	}
</style>
